import React from 'react';
import { Icon } from 'antd';

class E9LeftMenuTop4Email extends React.Component {
  constructor(props) {
    super(props);
    // type：写信（0），收信（1）
    // dataItems：写信/收信的类型列表
    this.state = { type: 0, visible: false, data: props.emailMenu, dataItems: [] };
  }

  componentWillReceiveProps(nextProps) {
    this.setState({ data: nextProps.emailMenu });
  }

  render() {
    const { type, visible, data, dataItems } = this.state;

    const writeEmailMenu = data[0] || {};
    const receiveEmailMenu = data[1] || {};

    let currentClassName = type == 0 ? 'e9left-menu-email-item-ul-bc1' : 'e9left-menu-email-item-ul-bc2';
    let selectedClassName1 = type == 0 && visible ? 'e9left-menu-email-item-selected' : '';
    let selectedClassName2 = type == 1 && visible ? 'e9left-menu-email-item-selected' : '';

    return (
      <div className="e9left-menu-email">
        <div className={`e9left-menu-email-item ${selectedClassName1}`} onClick={() => this.onSelect(0, writeEmailMenu, 0)}>
          <i className="wevicon wevicon-menu-default wevicon-menu-536-53601" />
          <span className="e9left-menu-email-title" title={writeEmailMenu.name}>
            {writeEmailMenu.name}
          </span>
          <Icon ecId={`${(this && this.props && this.props.ecId) || ''}_Icon@rirm9y`} type="caret-down" onClick={(e) => this.onSelectDropdown(e, 0)} />
        </div>
        <div className={`e9left-menu-email-item ${selectedClassName2}`} onClick={() => this.onSelect(1, receiveEmailMenu, 0)}>
          <i className="wevicon wevicon-menu-default wevicon-menu-536-53602" />
          <span className="e9left-menu-email-title" title={receiveEmailMenu.name}>
            {receiveEmailMenu.name}
          </span>
          <Icon ecId={`${(this && this.props && this.props.ecId) || ''}_Icon@li2e63`} type="caret-down" onClick={(e) => this.onSelectDropdown(e, 1)} />
        </div>
        <div className="e9left-menu-email-clear " />
        {visible ? (
          <ul className={`e9left-menu-email-item-ul ${currentClassName}`}>
            {dataItems.map((item, index) => (
              <li key={index} onClick={() => this.onSelect(index, item, 0)}>
                {item.name}
              </li>
            ))}
          </ul>
        ) : null}
      </div>
    );
  }

  onSelectDropdown(e, type) {
    e.stopPropagation();

    const { data } = this.state;
    const writeEmailMenu = data[0] || {};
    const receiveEmailMenu = data[1] || {};

    let dataItems = [];
    if (type == 0) {
      dataItems = writeEmailMenu.child || [];
    } else if (type == 1) {
      dataItems = receiveEmailMenu.child || [];
    }

    this.setState({ type, visible: type != this.state.type || !this.state.visible, dataItems });
  }

  onSelect(key, item, type) {
    this.setState({ visible: false });
    this.props.onSelect(key, item, type);
  }
}

export default E9LeftMenuTop4Email;
